import React,{memo,useRef, useState, useEffect} from "react";
import './controlSong.css'
import stop from './stop.png'
import play from './play.png'
import disc from './disc.png'
let songCover =''
let songurl =""
let songArray =[]
let timeArr = []
let timeLyricArr = []
let needle = 0;
let lyricArr = []
const ControlSong = (props) => {
    // console.log(props,'props')
    const {songUrl,songDetail,Lyric} = props
    const audioRef = useRef();
    const radioContainer = useRef();
    const progress = useRef();
    const lyricRef = useRef();
    const fill = useRef();
    const slide = useRef();
    const currentTimeDiv = useRef();
    const duratimeDiv = useRef();
    // console.log(Lyric.lyric,'111')
    Lyric.lyric?lyricArr = Lyric?.lyric.toString().split('\n'):
    
    console.log(lyricArr,'666')
    
    timeArr = lyricArr.map((item,index)=>{
        
        return item.split(']')[0].slice(1,item.length).slice(0,5);
    })
   timeLyricArr = lyricArr.map((item,index)=>{
        
      return item.split(']')[1];
  })
    // console.log(timeArr,'111')
    // console.log(timeLyricArr,'111')
   
    // let Time = audioRef.current.duration;
    // console.log(time,'111')
   
  
  useEffect(() => {
        audioRef.current.play();
        radioContainer.current.style.backgroundImage = `url(${stop})`;
        currentTimeDiv.current.innerHTML = transTime(parseInt(audioRef.current.currentTime));
    
        duratimeDiv.current.innerHTML = transTime(audioRef.current.duration);
        needle = 0;

}, [songUrl])
    function transTime(time) {
        let duration = parseInt(time);
        let minute = parseInt(duration / 60);
        let sec = (duration % 60) + "";
        let isM0 = ":";
        if (minute == 0) {
          minute = "00";
        } else if (minute < 10) {
          minute = "0" + minute;
        }
        if (sec.length == 1) {
          sec = "0" + sec;
        }
        return minute + isM0 + sec;
      }
      function MusicPlay() {
        console.log(lyricRef.current)
        if (audioRef.current.paused) {
            audioRef.current.play();
            radioContainer.current.style.backgroundImage = `url(${stop})`;
        } else {
            audioRef.current.pause();
          radioContainer.current.style.backgroundImage = `url(${play})`;
        }
      }
      function timeUp (){
        
        let Slide = slide.current
        let Fill = fill.current
        var l = (audioRef.current.currentTime / audioRef.current.duration) * 100;
        Slide.style.left = l + "%";
        Fill.style.width = l + "%";
        if (audioRef.current.currentTime == 0) {
          Slide.style.left = "0%";
        }
        // var currentTimeDiv = currentTimeDiv.current;
        currentTimeDiv.current.innerHTML = transTime(parseInt(audioRef.current.currentTime));
    
        duratimeDiv.current.innerHTML = transTime(audioRef.current.duration);
        // if(!Lyric&&!lyricArr&&!timeArr.length&&!timeLyricArr.length){
        //   let Index = timeArr.map((item,index)=>{
        //     if(item ==transTime(parseInt(audioRef.current.currentTime))){
        //       return index
        //     }
        //   })
        //   lyricRef.current.innerHTML = timeLyricArr[Index];
        //   console.log(Index,'566666666666666666666666666666666666')
        // }
        
        if(timeArr.indexOf(currentTimeDiv.current.innerHTML,0)!=-1){
          
          needle =timeArr.indexOf(currentTimeDiv.current.innerHTML,0)
          lyricRef.current.innerHTML = timeLyricArr[timeArr.indexOf(currentTimeDiv.current.innerHTML,0)];
          // console.log(needle,'111111')
        }
        else{
          lyricRef.current.innerHTML =timeLyricArr[needle]||''
          // console.log(timeArr,'555')
        }
        // console.log(timeArr,'5566')
        
       


      }
      function mouseDown(e){
          
        var rate = (e.clientX - progress.current.clientWidth) / progress.current.clientWidth*audioRef.current.duration
       
        audioRef.current.currentTime = rate-(progress.current.clientWidth*0.005)
      }
      function progressTouchEnd(e){
        //   console.log(e);
        var x = e.changedTouches[0].clientX - slide.current.offsetLeft; //240
        // console.log(x)
        audioRef.current.play();
        radioContainer.current.style.backgroundImage = `url(${stop})`;

      }
      function progressTouchMove(e){
        
        var rate = (e.changedTouches[0].clientX- progress.current.offsetLeft) / progress.current.clientWidth*audioRef.current.duration
        audioRef.current.currentTime = rate-(progress.current.clientWidth*0.005)-50
        //   console.log(e,slide.current.offsetLeft);
      }
    return (
        
          
              <div className="mp3Box">
                  
                <div className="song_pic_div">
                    <img src={songDetail[0].al.picUrl} alt="" className="song_cover_pic"/>
                   <img src={disc} alt="" className="disc_pic"/> 
                </div>
                
                <div className="progress" ref={progress} onClick={mouseDown}>
                    <div className="slide" ref={slide} 
                    
                        onTouchEnd={progressTouchEnd} onTouchMove={progressTouchMove}></div>
                    <div className="fill" ref={fill}></div>
                </div>
                
                <div className="time">
                    <span className="currentTime" ref={currentTimeDiv}>00:00</span> /
                    <span className="duraTime" ref={duratimeDiv}>00:00</span>
                </div>
                <div className="radioBox" onClick={MusicPlay} ref={radioContainer}>
                    <audio onTimeUpdate={timeUp} src={songUrl[0].url}  loop className='audio_control'  ref={audioRef}></audio>
                </div>
                <span className="lyric" ref={lyricRef}>
                  {songDetail[0].name}
                </span>
                
                {/* <div className="voice"></div> */}
            </div>
            
          
            
        

    )
}

export default ControlSong